import QtQuick 1.0
import "../Components"
import "../Util/Setting.js" as Setting

DialogBase {
    id: _root
    width: parent.width
    height: parent.height
    x: 0
    y: 0

    dialogTitle: "Setting"

    signal clickOkButton        //OKボタンのイベント
    signal clickCancelButton    //cancelボタンのイベント

    // 表示された時の処理
    function viewEvent(){
        loadSetting();
        _root.forceActiveFocus();
    }

    // 設定を反映する
    function applySetting(){
        // 一般
        Setting.updateInterval = _intervalText.value;
        Setting.updateCount = _updateCountText.value;
        Setting.viewCountMax = _viewCountText.value;
        Setting.inReplyCountMax = _inReplyToCountMaxText.value;
        Setting.toFocusTweetButton = _toFocusTweetButtonText.checked;
        // 表示アイテム
        Setting.fontPointSizeTitle = _titleFontSize.value;
        Setting.fontPointSizeMessage = _messageFontSize.value;
        Setting.fontPointSizeInfomation = _informationFontSize.value;
        Setting.fontPointSizeInputBox = _tweetInputFontSize.value;
    }

    // 設定を読み込む
    function loadSetting(){
        // 一般
        _intervalText.value = parseInt(Setting.updateInterval).toString();
        _updateCountText.value = parseInt(Setting.updateCount).toString();
        _viewCountText.value = parseInt(Setting.viewCountMax).toString();
        _inReplyToCountMaxText.value = parseInt(Setting.inReplyCountMax).toString();
        _toFocusTweetButtonText.checked = Setting.toFocusTweetButton;
        // 表示アイテム
        _titleFontSize.value = Setting.fontPointSizeTitle;
        _messageFontSize.value = Setting.fontPointSizeMessage;
        _informationFontSize.value = Setting.fontPointSizeInfomation;
        _tweetInputFontSize.value = Setting.fontPointSizeInputBox;
    }

    // パラメータチェック
    function checkValues(){
        var ret = true;

//        // 更新間隔
//        if(_intervalText.text < 30){
//            _toast.show("Please set 30 seconds or more at the update interval.")
//            ret = false;
//        }
//        // 取得件数
//        if(_updateCountText.text < 20 || _updateCountText.text > 200){
//            _toast.show("Please input a value from 20 to 200.")
//            ret = false;
//        }
//        // 表示件数
//        if(_viewCountText.text < 100){
//            _toast.show("Please set 100 or more.")
//            ret = false;
//        }
//        // in reply toの読込み数
//        if(_inReplyToCountMaxText.text < 1){
//            _toast.show("Please input a positive number.");
//            ret = false;
//        }

        return ret;
    }

    Keys.onEscapePressed: {
        closePressed();
    }

    // タブ移動のボタン
    Row{
        anchors.top: parent.titleBottom
        anchors.topMargin: 15
        anchors.right: parent.right
        anchors.rightMargin: 15
        spacing: 5

        Button{
            width: 40
            height: 20
            text: "<"
            onClicked: {
                _root.state = "";
            }
        }
        Button{
            width: 40
            height: 20
            text: ">"
            onClicked: {
                _root.state = "State1";
            }
        }
    }

    // 内容
    Row{
        id: _tab
        anchors.top: parent.titleBottom
        anchors.topMargin: 10
        x: 10

        // 一般設定
        Column{
            id: _tab0
            width: _root.width - 20
            spacing: 10


            // タイトル
            Text {
                text: qsTr("General")
                color: "#ffffff"
                font.pointSize: 18
                font.bold: true
                font.underline: true
            }

            // 更新間隔
            Row{
                width: parent.width
                height: _intervalText.height
                spacing: 5

                Text {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter

                    text: "Update interval(sec) : "
                    color: "#ffffff"
                }

                NumberBox{
                    id: _intervalText
                    value: 60
                    min: 30
                    max: 300
                    step: 30
                    accelerate: false
                }
            }

            // 取得件数
            Row{
                width: parent.width
                height: _updateCountText.height
                spacing: 5
                Text {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter

                    text: "Get tweets(20-200) : "
                    color: "#ffffff"
                }

                NumberBox{
                    id: _updateCountText
                    value: 30
                    min: 20
                    max: 200
                    step: 10
                    accelerate: false
                }
            }

            // 最大表示件数
            Row{
                width: parent.width
                height: _updateCountText.height
                spacing: 5
                Text {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter

                    text: "View tweets(100-) : "
                    color: "#ffffff"
                }

                NumberBox{
                    id: _viewCountText
                    value: 100
                    min: 100
                    max: 10000
                    step: 100
                    accelerate: false
                }
            }

            // in reply to の取得回数
            Row{
                width: parent.width
                height: _inReplyToCountMaxText.height
                spacing: 5

                Text {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter

                    text: "Max to get \'in reply to\'(times) : "
                    color: "#ffffff"
                }

                NumberBox{
                    id: _inReplyToCountMaxText
                    value: 5
                    min: 1
                    max: 20
                    step: 1
                    accelerate: false
                }
            }

            // ツイートボタンをフォーカス移動するか
            Row{
                width: _toFocusTweetButtonText.width
                height: _toFocusTweetButtonText.height
                spacing: 5

                CheckBox {
                    id: _toFocusTweetButtonText

                    text: "To focus the tweet button"
                    color: "#ffffff"
                }

            }
        }

        // 表示アイテムの設定
        Column{
            width: _root.width - 20
            spacing: 10

            // タイトル
            Text {
                text: qsTr("View items")
                color: "#ffffff"
                font.pointSize: 18
                font.bold: true
                font.underline: true
            }
            Text {
                text: qsTr("Font size")
                color: "#ffffff"
                font.pointSize: 14
                font.underline: true
            }

            // タイトルのサイズ
            Row{
                width: parent.width
                height: _titleFontSize.height
                spacing: 5

                Text {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter

                    text: "Name(pt) : "
                    color: "#ffffff"
                }

                NumberBox{
                    id: _titleFontSize
                    value: 10
                    min: 6
                    max: 48
                    step: 2
                    accelerate: false
                }
            }

            // メッセージのサイズ
            Row{
                width: parent.width
                height: _messageFontSize.height
                spacing: 5

                Text {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter

                    text: "Tweet(pt) : "
                    color: "#ffffff"
                }

                NumberBox{
                    id: _messageFontSize
                    value: 12
                    min: 6
                    max: 48
                    step: 2
                    accelerate: false
                }
            }

            // 情報のサイズ
            Row{
                width: parent.width
                height: _informationFontSize.height
                spacing: 5

                Text {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter

                    text: "Information(pt) : "
                    color: "#ffffff"
                }

                NumberBox{
                    id: _informationFontSize
                    value: 8
                    min: 6
                    max: 48
                    step: 2
                    accelerate: false
                }
            }

            // 入力ボックス
            Row{
                width: parent.width
                height: _tweetInputFontSize.height
                spacing: 5

                Text {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter

                    text: "Tweet input box(pt) : "
                    color: "#ffffff"
                }

                NumberBox{
                    id: _tweetInputFontSize
                    value: 10
                    min: 6
                    max: 48
                    step: 2
                    accelerate: false
                }
            }
        }
    }



    // OK Cancelボタン
    Row {
        id: _areaButton
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter


        spacing: 5

        Button {
            id: _buttonOk
            width: 100
            height: 25

            text: "O K"

            onClicked : {
                if(checkValues()){
                    applySetting();
                    clickOkButton();
                }
            }
        }

        Button {
            id: _buttonCancel
            width: 100
            height: 25

            text: "Cancel"

            onClicked : {
                clickCancelButton();
            }
        }
    }

    // タブの状態
    states: [
        State {
            name: "State1"
            PropertyChanges{ target: _tab; x: (10 - _tab0.width)}
        }
    ]
    transitions: Transition {
        NumberAnimation {
            easing.type: Easing.OutCubic
            target: _tab
            properties: "x"
            duration: 500
        }
    }

}
